<template>
  <div>
    <div class="loadingBox" v-if="!blogDetail">
      <img src="https://fuyouplus.oss-cn-beijing.aliyuncs.com/image/loading.gif" alt="loading" />
    </div>
    <div class="blogDetail" v-if="blogDetail">
      <div class="titleBox">
        <img :src="blogDetail.img" alt="" class="headerImg" />
        <div class="mc">
          <div class="title">{{ blogDetail.title }}</div>
          <div class="blogInfo">
            <div class="item">
              <ICalendar size="22" color="var(--iconColor)" />
              {{ format(blogDetail.createTime, "zh_CN").replace(" ", "") }}
            </div>
            <div class="item">
              <IClassify size="22" color="var(--iconColor)" />
              {{ blogDetail.category }}
            </div>
            <div class="item" v-if="blogDetail.tag">
              <ITag size="22" color="var(--iconColor)" />
              {{ blogDetail.tag }}
            </div>
          </div>
        </div>
      </div>
      <preview :template="blogDetail.content" />
    </div>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, onActivated, watch, computed } from "vue"
import { useRoute } from "vue-router"
import { useStore } from "vuex"
import { ICalendar, IClassify, ITag } from "@cop/Icons"
import { format } from "timeago.js"
import type { article as Article } from "@/hooks"
import bus from "@/eventBus"
import preview from "./preview.vue"

export default defineComponent({
  name: "blogDetail",
  components: {
    ICalendar,
    IClassify,
    ITag,
    preview,
  },
  setup() {
    const route = useRoute()
    const store = useStore()
    const postId = ref<number>(0)

    const blogDetail = computed<Article>(
      () => store.state.articles.filter((item: Article) => item.id == postId.value)[0]
    )

    // console.log("format=", format("2023/4/27 10:40:26", "zh_CN"))
    watch(blogDetail, newVal => {
      bus.state.title = newVal.title
    })

    onActivated(() => {
      postId.value = route.params.id as unknown as number
      if (blogDetail.value) {
        bus.state.title = blogDetail.value.title
      }
      setTimeout(() => {
        window.scrollTo({
          top: 100,
          behavior: "smooth",
        })
      }, 200)
    })
    return {
      format,
      blogDetail,
    }
  },
})
</script>

<style lang="scss" scoped>
.loadingBox {
  text-align: center;
  padding-top: 20px;
}

.blogDetail {
  .openComment {
    width: 300px;
    text-align: center;
    font-size: 25px;
    border-radius: 4px;
    background: var(--themeColor);
    color: var(--TextColor);
    margin: 50px auto 30px auto;
    cursor: var(--cursor-B);
  }

  .blogContent {
    margin-top: 40px;
  }

  .titleBox {
    display: block;
    max-width: 100%;
    width: 100%;
    margin-top: 10px;
    border-radius: var(--blogItemRadius);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    overflow: hidden;
    position: relative;

    &:hover .headerImg {
      // transform: scale(1.05);
      transform: scale(1.2) rotate(5deg);
    }

    .headerImg {
      display: block;
      max-width: 100%;
      max-height: 500px;
      width: 100%;
      border-radius: var(--blogItemRadius);
      transition: transform 0.7s ease-out;
    }

    .mc {
      width: 100%;
      max-width: 100%;
      height: 80px;
      position: absolute;
      left: 0;
      bottom: 0;
      backdrop-filter: blur(10px) saturate(150%) brightness(1.1);
      padding: 10px;
      box-sizing: border-box;
      background: var(--blogItemTitleBg);
      transition: all 0.3s var(--n-bezier);
      color: var(--TextColor);

      .title {
        font-size: 20px;
        font-weight: bold;
        transition: all 0.3s var(--n-bezier);
        color: var(--TextColor);
      }

      .blogInfo {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        text-align: left;
        margin-top: 5px;

        .item {
          margin-right: 20px;
          display: inline-flex;
          align-items: center;
          color: var(--TextColor);
          transition: color 0.3s var(--n-bezier);
          font-size: 16px;

          i {
            margin-right: 3px;
            transition: all 0.3s var(--n-bezier);
          }
        }
      }
    }
  }
}
</style>
